<template>
  <Dialog
    :title="title"
    :model-value="visible"
    width="1000px"
    max-height="800px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <Descriptions
      labelAlign="right"
      title="基本信息"
      :data="role"
      :column="2"
      label-width="120px"
      minWidth="200px"
      :schema="scheme"
    />
    <ContentWrap title="权限目录" v-if="!role.IsAdmin" style="margin-top: 10px">
      <el-row style="width: 100%">
        <el-col :span="8">
          <div style="width: 100%; height: 350px; overflow-y: auto">
            <el-tree
              ref="powerTree"
              :data="trees"
              :default-expand-all="true"
              :highlight-current="true"
              :expand-on-click-node="false"
              style="width: 100%"
              :show-checkbox="false"
              :default-checked-keys="chioseKeys"
              :check-strictly="false"
              node-key="key"
              @node-click="chiosePower"
            >
              <template #default="{ node, data }">
                <div class="slot-t-node">
                  <Icon
                    v-if="data.style && data.style.icon"
                    :icon="data.style.icon"
                    :color="data.style.color"
                    :style="{ marginRight: '5px' }"
                  />
                  <span>{{ node.label }}</span>
                </div>
              </template>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="16">
          <ContentWrap :title="pTitle">
            <Table
              :data="powers"
              v-model:selectKey="selectKeys"
              row-key="Id"
              :check-is-select="
                () => {
                  return false
                }
              "
              :is-select="true"
              :is-multiple="true"
              :columns="columns"
            />
          </ContentWrap>
        </el-col>
      </el-row>
    </ContentWrap>
  </Dialog>
</template>

<script>
import { GetTrees } from '@/api/role/power'
import * as roleApi from '@/api/role/role'
import { GetEnables } from '@/api/role/opPower'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import { Table } from '@/components/Table'
export default {
  components: {
    Dialog,
    Descriptions,
    Table
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    roleId: {
      type: String,
      default: null
    },
    comId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '新增角色',
      powers: [],
      pTitle: '操作权限列表',
      columns: [
        {
          field: 'OperateName',
          label: '权限名',
          align: 'center',
          minWidth: 150
        },
        {
          field: 'Show',
          label: '说明',
          align: 'left',
          minWidth: 150
        }
      ],
      role: {},
      trees: [],
      source: null,
      chioseKeys: [],
      selectKeys: [],
      powerId: null,
      chioseId: null,
      scheme: [
        {
          field: 'RoleName',
          label: '角色名'
        },
        {
          field: 'IsAdmin',
          label: '是否为管理员',
          slots: {
            default: () => {
              return this.role.IsAdmin ? '是' : '否'
            }
          }
        },
        {
          field: 'Remark',
          label: '备注',
          span: 4
        }
      ]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.loadTrees()
  },
  methods: {
    checkIsChiose() {
      if (this.chioseId == null ? false : this.chioseKeys.includes(this.chioseId)) {
        return true
      }
      return false
    },
    async loadTrees() {
      const list = await GetTrees({
        IsEnable: true
      })
      this.trees = list.map((c) => {
        const t = {
          key: c.SubSysId,
          type: 'isSubSystem',
          label: c.SubSysName,
          style: {
            icon: 'ep:home-filled',
            color: '#f56c6c'
          }
        }
        t.children = this.getPowers(c.Powers)
        return t
      })
    },
    chiosePower(data) {
      if (data.type === 0 && this.chioseId !== data.key) {
        this.chioseId = data.key
        this.pTitle = data.label + '操作权限列表'
        this.loadPower(data.key)
      }
    },
    getPowers(list) {
      return list.map((c) => {
        const t = {
          key: c.Id,
          type: c.PowerType,
          label: c.Name
        }
        if (c.PowerType === 1) {
          t.style = {
            icon: 'ep:folder',
            color: '#409eff'
          }
        } else if (c.PowerType === 0) {
          t.style = {
            icon: 'ep:document',
            color: '#000'
          }
        }
        if (c.Children && c.Children.length !== 0) {
          t.children = this.getPowers(c.Children)
        }
        return t
      })
    },
    async loadPower(powerId) {
      const res = await GetEnables(powerId, this.roleId)
      if (res == null) {
        this.powers = []
        this.selectKeys = []
        return
      }
      this.powers = res.Powers
      this.selectKeys = res.Selected
    },
    async reset() {
      const res = await roleApi.get(this.roleId)
      this.role = res
      this.source = res
      this.powerId = res.PowerId
      this.chioseKeys = res.PowerId
    },
    closeForm() {
      this.$emit('update:visible')
    }
  }
}
</script>
